/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	html {
		@apply scroll-smooth;
	}

	body {
		@apply select-none;
	}

	/* osx style scrollbars */
	.pretty-scrollbar {
		scrollbar-width: thin;
		scrollbar-color: theme('colors.gray.200') transparent;
	}

	.pretty-scrollbar::-webkit-scrollbar {
		height: 6px;
		width: 6px;
	}

	.pretty-scrollbar::-webkit-scrollbar-track {
		background-color: transparent;
	}

	.pretty-scrollbar::-webkit-scrollbar-thumb {
		background-color: transparent;
		border-radius: 7px;
	}

	.pretty-scrollbar:hover::-webkit-scrollbar-thumb {
		background-color: theme('colors.gray.200');
	}

	/* hidden scrollbar */
	.no-scrollbar::-webkit-scrollbar {
		display: none;
	}
	.no-scrollbar {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	/* remove user agent styles for select */
	select {
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
	}
}

@layer components {
	.markdown {
		@apply leading-normal font-sans text-base antialiased text-gray-700;
	}

	img.markdown {
		@apply mx-auto h-auto max-w-full rounded-lg;
	}

	article.markdown a.markdown {
		@apply text-blue-600 underline decoration-transparent hover:decoration-blue-600  transition-all duration-200 !important;
	}

	p.markdown,
	ul.markdown,
	ol.markdown {
		margin-block-end: 1.2em;
		margin-block-start: 0em;
	}

	/* lists */

	ol.markdown {
		@apply list-decimal ps-6;
	}
	ul.markdown {
		@apply list-disc ps-6;
	}

	/* 1st level list */
	ul.markdown,
	ol.markdown {
		/* 2nd level unordered list */
		& ul.markdown {
			@apply list-circle;
		}
		/* 2nd level ordered list */
		& ol.markdown {
			@apply list-lower-alpha;
		}

		/* any 2nd level list */
		& ul.markdown,
		& ol.markdown {
			@apply mt-1;
			margin-block-end: 0em;

			/* 3rd level unordered list */
			& ul.markdown {
				@apply list-square;
			}
			/* 3rd level ordered list */
			& ol.markdown {
				@apply list-lower-roman;
			}
		}

		li.markdown {
			@apply list-item;
			text-align: -webkit-match-parent;

			& + li.markdown {
				@apply mt-1;
			}
		}
	}
	ol.markdown > li.markdown::marker {
		@apply text-gray-800;
	}

	ul.markdown > li.markdown::marker {
		@apply text-gray-800;
	}

	h1.markdown,
	h2.markdown,
	h3.markdown,
	h4.markdown,
	h5.markdown,
	h6.markdown {
		@apply scroll-mt-14 break-inside-avoid font-sans;
		/* ensure that table of contents links scroll with room for the header */
	}

	h1.title:first-of-type,
	h1.markdown:first-of-type {
		@apply mt-1 mb-2;
	}

	h1.title {
		@apply mt-5 mb-1 text-2xl tracking-wide font-bold text-gray-800 break-inside-avoid;
	}

	h1.markdown {
		@apply mt-5 mb-1 text-2xl tracking-wide font-bold text-gray-800 break-inside-avoid;
	}

	h2.markdown {
		@apply mt-3 mb-1 text-xl font-semibold text-gray-800;
	}

	h3.markdown {
		@apply mt-2 mb-1 font-semibold text-base text-gray-800;
	}

	h4.markdown {
		@apply mt-1 text-sm  font-semibold text-gray-800;
	}

	h5.markdown {
		@apply mt-1 text-xs font-semibold text-gray-800;
	}

	h6.markdown {
		@apply mt-1 text-xs text-gray-950;
	}

	hr.markdown {
		@apply h-px my-8 max-w-xl mx-auto bg-gray-200 border-0;
	}

	code.markdown {
		@apply font-mono text-gray-800 text-[0.875em] bg-gray-50 border rounded px-1 select-all py-0.5;
	}

	form code {
		font-size: unset;
	}

	blockquote.markdown {
		@apply border-l-4 border-gray-300 pl-3 my-8;
	}

	blockquote.markdown * {
		@apply text-gray-500;
	}
	/* Ensure size and color are maintained for bold, italic, strikethrough */
	strong.markdown {
		@apply text-[1em] text-inherit;
	}

	em.markdown {
		@apply text-[1em] text-inherit;
	}

	del.markdown {
		@apply text-[1em] text-inherit;
	}

	a.markdown {
		@apply text-[1em] text-inherit;
	}

	table.markdown {
		@apply min-w-full  border-collapse text-center mx-auto my-5;
	}

	th.markdown {
		@apply text-sm text-gray-800 font-medium border-b border-gray-800 py-0 px-2 text-ellipsis overflow-hidden;
	}

	td.markdown {
		@apply text-sm text-gray-800 py-1 px-2 overflow-hidden text-ellipsis;
	}
}

:root {
	/* Layout header height */
	--header-height: 3.5rem;
	/* Font stacks */
	--monospace-font-family: theme(fontFamily.mono);
	--ui-font-family: theme(fontFamily.sans);
	--ui-font-family-compact: theme(fontFamily.sans);
	--color1: theme(colors.color.1);
	--color2: theme(colors.color.2);
	--color3: theme(colors.color.3);
	--color4: theme(colors.color.4);
	--color5: theme(colors.color.5);
	--color6: theme(colors.color.6);
	--color7: theme(colors.color.7);
	--color8: theme(colors.color.8);
	--color9: theme(colors.color.9);
	--color10: theme(colors.color.10);
	--color11: theme(colors.color.11);
	--color12: theme(colors.color.12);
	--color13: theme(colors.color.13);
	--color14: theme(colors.color.14);
	--color15: theme(colors.color.15);
	--color16: theme(colors.color.16);
	--color17: theme(colors.color.17);
	--color18: theme(colors.color.18);
	--color19: theme(colors.color.19);
	--color20: theme(colors.color.20);

	/* Colour System */
	--blue-50: theme(colors.blue.50);
	--blue-100: theme(colors.blue.100);
	--blue-200: theme(colors.blue.200);
	--blue-300: theme(colors.blue.300);
	--blue-400: theme(colors.blue.400);
	--blue-500: theme(colors.blue.500);
	--blue-600: theme(colors.blue.600);
	--blue-700: theme(colors.blue.700);
	--blue-800: theme(colors.blue.800);
	--blue-900: theme(colors.blue.900);
	--blue-999: theme(colors.blue.950);
	--blue-link: theme(colors.blue.700);
	--green-50: theme(colors.green.50);
	--green-100: theme(colors.green.100);
	--green-200: theme(colors.green.200);
	--green-300: theme(colors.green.300);
	--green-400: theme(colors.green.400);
	--green-500: theme(colors.green.500);
	--green-600: theme(colors.green.600);
	--green-700: theme(colors.green.700);
	--green-800: theme(colors.green.800);
	--green-900: theme(colors.green.900);
	--green-999: theme(colors.green.950);
	--grey-50: theme(colors.gray.50);
	--grey-100: theme(colors.gray.100);
	--grey-200: theme(colors.gray.200);
	--grey-300: theme(colors.gray.300);
	--grey-400: theme(colors.gray.400);
	--grey-500: theme(colors.gray.500);
	--grey-600: theme(colors.gray.600);
	--grey-700: theme(colors.gray.700);
	--grey-800: theme(colors.gray.800);
	--grey-900: theme(colors.gray.900);
	--grey-999: theme(colors.gray.950);
	--red-50: theme(colors.red.50);
	--red-100: theme(colors.red.100);
	--red-200: theme(colors.red.200);
	--red-300: theme(colors.red.300);
	--red-400: theme(colors.red.400);
	--red-500: theme(colors.red.500);
	--red-600: theme(colors.red.600);
	--red-700: theme(colors.red.700);
	--red-800: theme(colors.red.800);
	--red-900: theme(colors.red.900);
	--red-999: theme(colors.red.950);
	--yellow-50: theme(colors.yellow.50);
	--yellow-100: theme(colors.yellow.100);
	--yellow-200: theme(colors.yellow.200);
	--yellow-300: theme(colors.yellow.300);
	--yellow-400: theme(colors.yellow.400);
	--yellow-500: theme(colors.yellow.500);
	--yellow-600: theme(colors.yellow.600);
	--yellow-700: theme(colors.yellow.700);
	--yellow-800: theme(colors.yellow.800);
	--yellow-900: theme(colors.yellow.900);
	--yellow-999: theme(colors.yellow.950);
}

@media print {
	html {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	h1,
	h2,
	h3,
	h4 {
		break-after: avoid-page;
	}

	article {
		orphans: 2;
		widows: 2;
	}
}
